<template>
  <div class="main-todo">
    <input
      v-model.trim="content"
      @keyup.enter="handleAdd"
      class="add-todo"
      type="text"
      placeholder="塔罗牌( •̀ ω •́ )✧   ↵"
      autofocus />
    <div class="overflow">
      <todo-item
        v-for="item in filterTodos"
        :key="item.id"
        :todo="item"
        @toggle="handleToggle"
        @change="handleChange"
        @del="handleDel"></todo-item>
    </div>

    <todo-info
      :total="total"
      @toggles="handleToggles"
      @del-all="handleDelAll"></todo-info>
  </div>
</template>

<script setup>
// 导入子组件
import { reactive } from "vue"
import TodoInfo from "./coms/TodoInfo"
import TodoItem from "./coms/TodoItem"

var todos = reactive([])
var filterTodos = reactive([
  { id: 1, content: "天蝎座", completed: 1 },
  { id: 2, content: "金牛座", completed: 1 },
  { id: 3, content: "狮子座", completed: 1 },
  { id: 4, content: "处女座", completed: 1 },
  { id: 5, content: "天秤座", completed: 1 },
])
var content = reactive("")

var total = computed(()=>{
  return todos.filter((item) => item.completed == 0).length
})

  function handleAdd() {
      if (this.content == "") {
        alert("请输入星座塔罗牌( •̀ ω •́ )✧");
        return;
      }
</script>

<style lang="stylus">
.main-todo
  width 700px
  margin 0 auto
  background-color rgba(255,255,255,0.2)
  border-radius: 5px
  box-shadow: 1px 2px 3px rgba(200, 200, 169, 0.5)

  //滑动栏
  .overflow
    height 280px
    overflow auto
  //隐藏滑动栏
  ::-webkit-scrollbar
    width 0px
    height 0px
    background-color transparent
  .add-todo
    padding 10px 10px 10px 40px
    width 100%
    font-size: 30px
    font-family: 'STXinwei'
    background-color rgba(255,255,255,0.4)
    //外边框不显示
    border: none
    //聚焦边框不显示
    outline: none
    border-radius: 5px 5px 0 0
    box-sizing: border-box
</style>
